<!-- author: 薛皓文 -->
<!-- date: 2024-11-27 19:01:43 -->
<!-- description: 二次封装 uni-calendar -->

<template>
    <view @click="openCalendar">
        <!-- 范围 -->
        <template v-if="_$attrs().range">
            <template v-if="modelValue && modelValue.length > 0">
                {{ modelValue[0] }} - {{ modelValue[1] }}
            </template>
            <template v-else>
                {{ _$attrs().placeholder || '请选择' }}
            </template>

        </template>
        <!--  单个  -->
        <template v-else>
            {{ modelValue || _$attrs().placeholder || '请选择' }}
        </template>
    </view>
    <uni-calendar ref="calendarRef" v-bind="_$attrs()"  :insert="false"
        :clearDate="_$attrs().clearDate || false" @confirm="confirmCalendar" />
</template>
<script setup>
import {
    reactive,
    toRefs,
    ref,
    getCurrentInstance,
    computed,
    watch
} from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import dayjs from 'dayjs';
import globalHook from "@/hooks/globalHook.js"
const globalHookObj = globalHook();
const { _$attrs } = toRefs(globalHookObj);
//传参
const $props = defineProps({
    modelValue: {
        //所有类型
        type: [Number, String, Boolean, Array, Object, Function],
        default: () => {
            return undefined;
        },
    },
});
const {
    formType,
} = toRefs($props);
//TODO hooks提出双向绑定
const $emit = defineEmits(["update:modelValue", "confirmCalendar"]);
//双向绑定
const modelValue = computed({
    get() {
        return $props.modelValue;
    },
    set(value) {
        $emit("update:modelValue", value);
    },
});


/**
 * 日历方法
 */
const calendarRef = ref(null);
// 打开日历
const openCalendar = () => {
    calendarRef.value.open()
}
//选择日期
const confirmCalendar = (e) => {
    console.log(e);
    let fullDate = ''
    console.log(_$attrs.value());

    if (_$attrs.value().range) {
        //都选择才可
        if (e.range.after && e.range.before) {
            fullDate = [dayjs(e.range.after).format(_$attrs.value().format || "YYYY-MM-DD"), dayjs(e.range.before).format(_$attrs.value().format || "YYYY-MM-DD")]
        }

    } else {
        fullDate = dayjs(e.fulldate).format(_$attrs.value().format || "YYYY-MM-DD")
    }
    modelValue.value = fullDate;
    $emit('confirmCalendar', e, modelValue.value)


}
const state = reactive({
})
const { } = toRefs(state);

onLoad(() => {
});
</script>
<style lang="scss" scoped>
.container {}
</style>
